<template>
	<view class="content">
    <scroll-view class="scroll-view-horizontal" scroll-x>
      <view class="list" :class="liveDayValue===0 ? 'active':''" @click="clickDay(0)">全部</view>
      <view v-for="day,index of liveDayData" :key="index" class="list" :class="liveDayValue===day ? 'active':''" @click="clickDay(day)">{{ day }}</view>
    </scroll-view>
		<view v-if="liveListData" class="bodyCont">
      <template v-if="this.liveDayValue==0">
        <view v-for="(value, key, index) in liveListData" :key="key" class="list">
          <view class="dayTime">{{ key }}</view>
          <view class="dayCont">
            <view v-for="list,index of value" :key="index" class="dayList" @click="enterFun(list)">
              <image class="images" :src="list.img"></image>
              <view class="textBox">
                <view class="top">
                  <view v-if="list.status===0" class="end">待直播</view>
                  <view v-if="list.status===1" class="ing">直播中</view>
                  <view v-if="list.status===2" class="end">直播结束</view>
                  <view v-if="list.status===1" class="enter">进入直播</view>
                </view>
                <view class="name">{{ list.title }}</view>
                <view class="desc">主播: {{ list.anchor }}</view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="list">
          <view class="dayCont">
            <view v-for="list,index of liveListData" :key="index" class="dayList" @click="enterFun(list)">
              <image class="images" :src="list.img"></image>
              <view class="textBox">
                <view class="top">
                  <view v-if="list.status===0" class="end">待直播</view>
                  <view v-if="list.status===1" class="ing">直播中</view>
                  <view v-if="list.status===2" class="end">直播结束</view>
                  <view v-if="list.status===1" class="enter">进入直播＞</view>
                </view>
                <view class="name">{{ list.title }}</view>
                <view class="desc">主播: {{ list.anchor }}</view>
              </view>
            </view>
          </view>
        </view>
      </template>
		</view>
    <view v-else class="noData">
      <image src="../../static/nodata2.png" class="noImage"></image>
      <view class="textFont">暂无数据</view>
    </view>
	</view>
</template>

<script>
  import { getApi, postApi } from "@/api/index.js"
	export default {
		data() {
			return {
				title: 'Hello',
        liveDayData: [],
        liveDayValue: 0,
        liveListData: '',
        live_url: ''
			}
		},
		onLoad() {
      uni.setNavigationBarTitle({
        title: '爵美研究院' // 设置为你想要显示的标题文本
      })
      this.init()
		},
    onShow() {
		},
		methods: {
      init(){
        let obj={
          live_date: this.liveDayValue==0?'':this.liveDayValue // 直播日期(当传入日期时,data数据只有一层)
        }
        uni.showLoading({
          title: '加载中'
        })
        this.loading = true
        postApi('/index/liveList', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            this.liveListData = res.data
            // 使用for...in循环遍历对象属性
            if(this.liveDayValue==0){
              this.liveDayData = []
              for (let key in res.data) {
                console.log(key);
                console.log(res.data[key]);
                this.liveDayData.push(key)
              }
              // console.log(this.liveDayData)
              console.log(this.liveListData)
            }
            uni.hideLoading()
          }
        }).catch(err => {
          this.loading = false
        })
      },
      clickDay(day){
        this.liveDayValue = day
        this.init()
      },
      enterFun(row){
        console.log(row) // 直播链接
        this.live_url = row.live_url
        // 使用encodeURIComponent对URL进行编码
        const url = encodeURIComponent(this.live_url);
        console.log(url)
        // 跳转到外部链接
        uni.navigateTo({
          url: '/pages/detail/webView?url=' + url
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  background: #fff;
  .scroll-view-horizontal {
    background: #fff;
    white-space: nowrap;
    overflow-x: auto;
    .list {
      display: inline-block;
      font-weight: 500;
      font-size: 24rpx;
      color: #000000;
      width: auto; /* 设置每个列表项的宽度 */
      margin-right: 40rpx; /* 列表项之间的间隔 */
      padding-bottom: 10rpx;
    }
    .active{
      position: relative;
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
      &:after{
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -24rpx;
        width: 46rpx;
        height: 4rpx;
        background: #000000;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
  }
  .bodyCont{
    padding-top: 20rpx;
    .list{
      .dayTime{
        margin: 10rpx 0 20rpx 0;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
      .dayCont{
        .dayList{
          padding: 20rpx;
          display: flex;
          background: #F8F8F8;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          .images{
            margin-right: 30rpx;
            width: 88rpx;
            height: 88rpx;
            background: #aaa;
            border-radius: 50%;
          }
          .textBox{
            width: calc(100% - 118rpx);
            .top{
              margin-bottom: 8rpx;
              width: 100%;
              display: flex;
              justify-content: space-between;
              .ing{
                padding-left: 32rpx;
                background-image: url('@/static/other/ing.png');
                background-size: 26rpx 26rpx;
                background-repeat: no-repeat;
                font-weight: 400;
                font-size: 20rpx;
                color: #4ED526;
              }
              .end{
                padding-left: 32rpx;
                background-image: url('@/static/other/end.png');
                background-size: 26rpx 26rpx;
                background-repeat: no-repeat;
                font-weight: 400;
                font-size: 20rpx;
                color: #81838F;
              }
              .enter{
                font-weight: bold;
                font-size: 20rpx;
                color: #888888;
              }
            }
            .name{
              margin-bottom: 6rpx;
              min-height: 68rpx;
              font-weight: bold;
              font-size: 24rpx;
              color: #000000;
            }
            .desc{
              font-weight: 400;
              font-size: 16rpx;
              color: #888888;
            }
          }
        }
      }
    }
    
  }
}
</style>
